import React from 'react';
import { Col } from 'antd';
import { ColProps } from './../../components/col/Col';
import styles from './../../components/col/col.module.scss';

const Td = (props: any) => {
  const span = props.span as number;
  const width = span / 24 * 100 + '%';
  const _styles: React.CSSProperties = { ...props.style };

  if(props.colProps?.clearBorderTop) _styles.borderTop = 'none';
  if(props.colProps?.clearBorderLeft) _styles.borderLeft = 'none';

  return (
    <td
      {...props}
      className={`${styles.td} ${styles.tdPrint}`}
      width={width}
      data-parentchildren={props.childrenLen} 
      style={_styles}/>
  );
};

export default (props: ColProps) => {
  const { colProps } = props;

  let Component: any = Col;

  if (colProps.tableStyle) {
    Component = Td;
  }

  const children = props.children || [];

  return (
    <Component
      {...props}
      {...colProps}
      childrenLen={children.length}
      className={styles.row} />
  );
};